<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>关注成长</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
    <link rel="stylesheet" href="css/element-ui-index.css" />
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/element-ui-index.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
    <link type="text/css" href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div id="app" style="width: 100%;">
<template style="width: 100%;">
    <div style="text-align: center;font-size: xx-large;color: #575757;padding: 42px 0 42px 0;">学情匿名登记</div>

    <!-- 登陆框 -->
    <div class="login-form" style="margin: 36px;">
      <!-- 登录表单 -->
      <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
        <el-form-item prop="formUsername" style="margin-bottom:32px;">
          <div style="float: left;width: 25%;font-size:12px;">登录名</div>
          <el-input v-model="loginForm.formUsername" @keyup.enter.native="login" maxlength="11" style="font-size:13px;width: 75%;float: right;"></el-input>
        </el-form-item>
        <el-form-item prop="formPassword" style="margin-bottom:32px;">
          <div style="float: left;width: 25%;font-size:12px;">密码</div>
          <el-input v-model="loginForm.formPassword" @keyup.enter.native="login" maxlength="4" show-password  style="font-size:13px;width: 75%;float: right;"></el-input>
        </el-form-item>
        <el-row>
          <el-col>
            <el-button type="primary" :loading="loadingBtn" @click="login" class="el-col-24">
              <div v-if="!loadingBtn">登 录 &nbsp; / &nbsp; 注 册</div>
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div style="font-size: small;color: #00a599;padding: 32px 32px 7px 32px;">
      ●  整个登记过程和查看过程均为自愿、匿名、无管理。
    </div>
    <div style="font-size: small;color: #00a599;padding: 7px 32px 16px 32px;">
      ● 请随意设置11位数字登录名（建议使用手机号）和4位密码, 并请牢记，不提供找回服务。
    </div>
    <div style="font-size: small;color: #00a599;padding: 7px 32px 16px 32px;">
      ● 如果这件事导致您的不悦，请见谅，直接关闭就好。
    </div>
</template>
</div>
</body>

<script type="text/javascript">
new Vue({
    el: '#app',
    data: {
      token: "",
      loadingBtn: false,
      // 登录表单对象
      loginForm: {
        formUsername: "",
        formPassword: ""
      },
      // 登录表单验证规则
      loginFormRules: {
        // 用户名的校验规则
        formUsername: [
          { required: true, message: "请输入11位登录名称", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位登录名称", trigger: "blur" }
        ],
        // 登陆密码的校验规则
        formPassword: [
          { required: true, message: "请输入4位密码", trigger: "blur" },
          { min: 4, max: 4, message: "请输入4位密码", trigger: "blur" }
        ]
      }
    },
    created() {
        //console.log('created');
    },
    mounted() {
        //console.log('mounted');
        sessionStorage.clear();
    },
    methods: {
        async login() {
            this.$refs.loginFormRef.validate(async valid => {
                if (!valid) return this.$message.error("请输入有效的登录信息");
                var params = {};
                params.username = this.loginForm.formUsername;
                params.password = this.loginForm.formPassword;
                this.loadingBtn = true;
                //登录请求
                let _this = this;
                axios.post("/api/login", params)
                  .then(function (res) {
                    if (res.data.rcode == 0) {
                        _this.loadingBtn = false;
                        sessionStorage.clear();
                        sessionStorage.setItem("token", res.data.token);
                        if (res.data.is_admin) {
                          sessionStorage.setItem("is_admin", 1);
                        } else {
                          sessionStorage.setItem("is_admin", 0);
                        }
                        window.location.href = "list.html";
                        return;
                    } else {
                        _this.loadingBtn = false;
                        return _this.$message.error(res.data.rmsg);
                    }
                  })
                  .catch(function (error) {
                      _this.loadingBtn = false;
                      return _this.$message.error("系统异常");
                  });
            })
        }
    }
})
</script>

</html>